<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick" type='card'>
      <el-tab-pane :label="item.tab" :name="item.name" v-for="item in tabs" :key='item.id'>

      </el-tab-pane>
    </el-tabs>
    <el-form class="form_search" :inline="true" label-width='90px'>
      <el-form-item label="姓名：">
        <el-input v-model="queryParam.username" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item label="账号：">
        <el-input v-model="queryParam.mobile" placeholder="请输入账号" clearable />
      </el-form-item>
      <el-form-item label="操作时间：">
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          class="filter-item form-search-input1"
          @change='timeChange'
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item search" type='primary' icon="el-icon-search" @click="handleSearch">查询</el-button>
        <el-button class="filter-item" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        <el-button class="filter-item search" icon="el-icon-s-unfold" @click="handleExport">导出</el-button>
        <el-button class="filter-item" type='warning' @click="handleSetting">提现设置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="data"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <!-- <el-table-column prop="id" label="序号" width='60' align='center'/> -->
      <el-table-column label="用户名"  align='center'>
        <template slot-scope="item">
          <p v-if="item.row.user_info">{{item.row.user_info.username || item.row.user_info.mobile}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="user_info.mobile" label="账号" align='center'/>
      <el-table-column label="提现金额" prop='cash' align='center'/>
      <el-table-column prop="create_time" label="提现申请时间" align='center'/>
      <el-table-column label="提现状态" align='center'>
        <template slot-scope="item">
          {{item.row.status==1?'审核通过':item.row.status==2?'审核拒绝':'审核中'}}
        </template>
      </el-table-column>
      <el-table-column prop="action_log.remake" label="备注" align='center'/>
      <el-table-column label="操作" align='center'>
        <template slot-scope="item">
          <el-link type="primary" class="table_btn" v-if="item.row.status==0" @click="handleExamine(item.row)" :underline="false">
            <i class="iconfont icon-shenhe1"></i>提现审核
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="pagination-container"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginate.current"
      :hide-on-single-page='isHideSingle'
      :page-sizes="paginate.sizes"
      :page-size="paginate.limit"
      :layout="paginate.layout"
      :total="paginate.total"/>
    <withdrawalAudit ref='withdrawalAudit' @success='getList' :url='url'></withdrawalAudit>
    <el-dialog :visible.sync="formVisible1" @close="hideSetting" width='516px'>
      <div slot="title" class="dialog-title">提现设置</div>
      <el-form :ref="formName1" :model="formFieldsData1" label-width = '120px' :label-position="labelPosition">
        <el-form-item label="最低提现金额：" prop="min_money">
          <el-input type="number" v-model="formFieldsData1.min_money" style="width: 92%"></el-input>
          <span class="suffix">元</span>
        </el-form-item>
        <el-form-item label="提现频次：" prop="type">
          <div class="flex_box wages">
            <el-radio v-model="formFieldsData1.type" label="0">不限制</el-radio>
          </div>
          <div class="flex_box wages">
            <el-radio v-model="formFieldsData1.type" label="1">每天一次</el-radio>
          </div>
          <div class="flex_box wages">
            <el-radio v-model="formFieldsData1.type" label="2">每周一次</el-radio>
            <el-select v-model="week_status" placeholder="请选择" style="width: 92%">
              <el-option
                v-for="(item,key) in weeks"
                :key="key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="flex_box wages">
            <el-radio v-model="formFieldsData1.type" label="3">每月一次</el-radio>
            <el-select v-model="month_status" placeholder="请选择" style="width: 92%">
              <el-option
                v-for="(item,key) in months"
                :key="key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hideSetting" size='medium'>取 消</el-button>
        <el-button type="primary" @click="settingSubmit" size='medium'>确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import withdrawalAudit from '@/views/financial/components/withdrawalAudit.vue'
import { export2Excel } from '@/utils/excel'
export default {
  name: 'Index',
  mixins: [formOperate],
  data() {
    return {
      url:'/user/admin/Withdraw',
      tabs:[
        {id:-1,tab:'所有用户',name:'first'},
        {id:0,tab:'待审核',name:'second'},
        {id:1,tab:'已完成',name:'third'},
        {id:2,tab:'已驳回',name:'fourth'}
      ],
      activeName: 'second',// tabs默认第几个展开
      id:'',
      queryParam: {
        username: '',
        mobile:'',
        start_time:'',
        end_time:'',
        page:1,
        page_size:10,
        status:0
      },
      defaultQueryParam:['page','page_size','status'],
      time:'',
      weeek_status:'',
      optionsType:[
        {value:'1',label:'处理中'},
        {value:'2',label:'完成'},
        {value:'3',label:'失败'},
        {value:'4',label:'入账'}
      ],
      formName1:'withdrawalSetting',
      formVisible1:false,
      formFieldsData1:{
        min_money:'',
        type:'0',
        type_value:''
      },
      radio:'',
      week_status:'',
      month_status:'',
      months:[],
      weeks: [
        {value:'1',label:'每周一'},
        {value:'2',label:'每周二'},
        {value:'3',label:'每周三'},
        {value:'4',label:'每周四'},
        {value:'5',label:'每周五'},
        {value:'6',label:'每周六'},
        {value:'7',label:'每周日'},
      ]
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.months = []
    let date = new Date();
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let days = new Date(year,month,0).getDate();
    for (let i = 1; i <= days ; i++) {
      this.months.push({value:i.toString(),label:i+'号'},)
    }
  },
  methods: {
    // 提现审核
    handleExamine(item) {
      this.$refs.withdrawalAudit.show(item)
    },
    // 获取提现配置
    getWithdrawConfig() {
      this.$http.get('/user/admin/WithdrawConfig/Withdraw').then(response => {
        if (response.code == 10000 && response.data && response.data.withdraw) {
          this.formFieldsData1 = {...response.data.withdraw}
          if (this.formFieldsData1.type == 2) {
            this.week_status = this.formFieldsData1.type_value
          } else if (this.formFieldsData1.type == 3) {
            this.month_status = this.formFieldsData1.type_value
          }
        }
      })
    },
    // 提现设置
    handleSetting() {
      this.formVisible1 = true
      this.getWithdrawConfig()
    },
    // 提现设置隐藏
    hideSetting() {
      this.formVisible1 = false
    },
    // 提现设置提交数据
    settingSubmit() {
      if (this.formFieldsData1.min_money == '') {
        this.$message.error('请输入最低提现金额')
        return
      }
      if (this.formFieldsData1.type == 2) {
        if (this.week_status == '') {
          this.$message.error('请选择每周几提现')
          return
        } else {
          this.formFieldsData1.type_value = this.week_status
        }
      }
      if (this.formFieldsData1.type == 3) {
        if (this.month_status == '') {
          this.$message.error('请选择每月几号提现')
          return
        } else {
          this.formFieldsData1.type_value = this.month_status
        }
      }
      this.$http.post('/user/admin/WithdrawConfig', this.formFieldsData1).then(response => {
        if(response.code==10000) {
          this.$message.success('设置成功')
          this.hideSetting()
        }
      })
    },
    // 导出
    handleExport() {
      let columns = [
        {title:'用户名',key:'name'},
        {title:'账号',key:'mobile'},
        {title:'提现金额',key:'cash'},
        {title:'提现申请时间',key:'create_time'},
        {title:'提现状态',key:'status'},
        {title:'备注',key:'remake'}
      ]
      let list = []
      this.data.forEach(res=>{
        list.push({
          name:res.user_info.username,
          mobile:res.user_info.mobile,
          cash:res.cash,
          create_time:res.create_time,
          status:res.status==1?'审核通过':res.status==2?'审核拒绝':'审核中',
          remake:res.action_log.remake
        })
      })
      export2Excel(columns,list,'提现数据')
    },
  },
  components:{
    withdrawalAudit
  }
}
</script>
<style>
  .details .el-dialog__body{
    height: 700px;
    overflow-y: auto;
  }
</style>
<style lang="scss" scoped>
  .backUp{
    flex:1;
    min-width: 0;
    text-align: left;
    margin-bottom:10px;
  }
  .title{
    font-size: 16px;
    margin-bottom:10px;
  }
  .info{
    line-height: 30px;
  }
  .img_box{
    text-align: center;
  }
  .job_list{
    border:1px solid #eee;
    padding: 10px;
    border-radius: 4px;
  }
  .wages{
    margin-bottom: 20px;
  }
</style>